<template>
  <div class="home hiddenScroll">
    <LayoutContainer>
      <div class="header">
        <b class="main-title">
          零碳易行
          <br />
          <i class="second-title">Zero-carbon is easy</i>
        </b>
        <span class="des">从现在开始 世界将离「碳平衡」更近一步</span>
        <el-button type="success" size="large" color="rgb(235,237,240)">
          <a href="#start"><b>走进生态的世界 感受「碳平衡」😊</b></a>
        </el-button>
      </div>
      <div class="main" id="start">
        <!--    滚动时差模块    -->
        <div class="parallax-container">
          <div class="parallax photos1" id="section1">
            <div class="describe">
              <h1>「骑行」</h1>
              <h3>
                <span>骑车兼具通勤与健身功能，每小时消耗500千卡热量，且每公里减排0.2千克CO2。</span>
                <span
                  >长期骑行可降低50%心血管疾病风险，并通过替代机动车出行减少城市污染，实现“绿色通勤”的健康双赢。</span
                >
              </h3>
              <el-icon class="down" @click="scrollToNextSection(0)">
                <ArrowDownBold />
              </el-icon>
            </div>
          </div>
          <p class="content"></p>
          <div class="parallax photos2" id="section2">
            <div class="describe">
              <h1>「跑步」</h1>
              <h3>
                <span
                  >跑步作为零碳运动，每公里可减少约0.2千克CO2排放，同时提升心肺功能、缓解压力并降低慢性病风险。</span
                >
                <span>其健康效益与环保价值结合，形成“运动即减排”的良性循环。</span>
              </h3>
              <el-icon class="down" @click="scrollToNextSection(1)">
                <ArrowDownBold />
              </el-icon>
            </div>
          </div>
          <p class="content"></p>
          <div class="parallax photos3" id="section3">
            <div class="describe">
              <h1>「植树」</h1>
              <h3>
                <span
                  >植树通过光合作用固碳（1亩树林年吸收2−6万千克灰尘），同时改善微气候、降低呼吸道疾病风险。</span
                >
                <span>树木释放的负氧离子和心理疗愈作用还能缓解焦虑，形成“生态-健康”联动效应。</span>
              </h3>
              <el-icon class="down" @click="scrollToNextSection(2)">
                <ArrowDownBold />
              </el-icon>
            </div>
          </div>
        </div>
        <div id="section4" style="margin-bottom: 50px"></div>
        <!--轮播图-->
        <div class="carouse-container">
          <!--     网站主题标题     -->
          <div class="carouse-title">
            <div>网站主题</div>
            <i class="second-title" style="font-size: 15px; margin-bottom: 15px">Website Theme</i>
          </div>
          <!--轮播图-->
          <el-carousel class="carousel" :interval="4000" type="card" height="400px">
            <el-carousel-item v-for="item in images" :key="item">
              <div class="el-carousel-items">
                <el-image class="carousel-item" :src="item.src" fit="cover" />
                <div class="mask-layer">
                  <b class="big-font">{{ item.title }}</b>
                  <span class="flex-text">{{ item.des }}</span>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 选项框 -->
        <div class="chooses">
          <Choose v-for="i in chooses" :message="i"></Choose>
        </div>
      </div>
    </LayoutContainer>
  </div>
</template>

<script setup>
import LayoutContainer from '@/layout/LayoutContainer.vue'
import Choose from './components/Choose.vue'
import { getMessage, getToken } from '@/api/ai'
import { ref } from 'vue'
import '@/common/variables.css'

// 轮播图
const images = [
  {
    src: 'src/assets/bg1.jpg',
    title: '低碳',
    des: '每一次选择骑行或公共交通出行，每一次节约用水用电，都是对清新空气和湛蓝天空的深情告白更是对地球资源的珍惜与呵护',
  },
  {
    src: 'src/assets/bg2.jpg',
    title: '环保',
    des: '地球，这颗蔚蓝星球，是我们无可替代的家园，而环保，正是我们挺身而出，为家园筑起坚固防线的英勇行动',
  },
  {
    src: 'src/assets/bg3.jpg',
    title: '可持续',
    des: '可持续性发展，是实现人类永续发展的必由之路。从地球的资源环境到人类的生存发展，可持续发展都意味着对自然、社会和人的尊重与平衡',
  },
]

// 选择标签
const chooses = [
  {
    title: '生态见闻🌳',
    description: '在这里，你可以关注管理员发布的关于世界生态环境类的一些新闻，以便了解生态局势',
    enter: '查看新闻🤓',
    goto: '/',
  },
  {
    title: '零碳商城🛒',
    description: '「零碳」商城，在这里你可以购买或兑换到各种「零碳」产品，让你的生活更低碳',
    enter: '进入商城🤗',
    goto: '/shop',
  },
  {
    title: '在线论坛🗣️',
    description:
      '论坛中含有不同用户发表的内容，在这里你可以发布关于「零碳」的帖子，与更多人分享你的观点',
    enter: '进入论坛🧐',
    goto: '/forum',
  },
  {
    title: '碳足迹计算👣',
    description: '碳足迹计算，在这里你可以计算你的碳足迹，了解自己每年产生的碳排放量',
    enter: '详细计算🤔',
    goto: '/carbonfootprint',
  },
]

// 对话id
const conversation_id = ref(null)

//视图索引
const currentSectionIndex = ref(0)

//所有parallax区块的 ID 数组
const sections = ['section1', 'section2', 'section3', 'section4']

// 滚动到下一个区块
const scrollToNextSection = (value) => {
  currentSectionIndex.value = value + 1
  const nextSectionId = sections[currentSectionIndex.value]
  const element = document.getElementById(nextSectionId)

  if (element) {
    element.scrollIntoView({
      behavior: 'smooth',
    })
  }
}

// 获取token
const getApiToken = async () => {
  const res = (await getToken()).data
  return res.result.access_token
}

// 获取信息
const getApiMessage = async (message) => {
  const token = await getApiToken()
  const res = (await getMessage(message, conversation_id.value, token)).data
  // 记录对话id
  conversation_id.value = res.result.conversation_id
}
</script>

<style scoped less="scss">
.home {
  background-color: var(--primary-color);
  overflow-y: scroll;
  scroll-snap-type: y proximity; /* 滚动到附近则吸附 */
  scroll-behavior: smooth; /* 平滑滚动 */

  /* 头部 */

  .header {
    /* 设置弹性布局 */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 30px;
    scroll-snap-align: start;

    background: linear-gradient(165deg, #f7fcf8 50%, rgb(72, 155, 112) 95%, white 100%);
    margin: 70px 0 5px 0;
    height: 100vh;
    letter-spacing: 1px;
    transition: all 0.5s;

    /* 大标题 */

    .main-title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      font-size: 3rem;

      .second-title {
        font-size: 13px;
        font-family:
          italic 'Courier New',
          Courier,
          monospace;
      }
    }

    /* 描述文字 */

    .des {
      font-size: 1.3rem;
    }
  }

  /* 核心部分 */

  .main {
    /* 弹性布局 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;

    .content {
      width: 100%;
      margin: 0 auto;
      text-align: justify;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .parallax-container {
      width: 100%;
      margin-bottom: 15px;
      background-color: rgb(247, 252, 248);

      .parallax {
        width: 100%;
        height: 100vh;
        color: white;
        overflow: hidden;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
        /*固定背景图片*/
        background-attachment: fixed;
        /*捕捉元素的起始边缘*/
        scroll-snap-align: start;
        /*定位*/
        position: relative;

        .describe {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          width: 100%;
          height: 100%;
          background-size: cover;
          background-color: rgba(0, 0, 0, 0.2);
          transition: all 0.5s;

          h1 {
            letter-spacing: 15px;
          }

          h3 {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }

          .down {
            position: absolute;
            left: calc(50% - 20px);
            bottom: 20px;

            font-size: 40px;

            transition: all 0.5s;
            opacity: 0.7;
          }

          .down:hover {
            opacity: 0.9;
            scale: 1.1;
          }
        }

        .describe:hover {
          background-color: rgba(0, 0, 0, 0.4);
        }
      }

      .photos1 {
        background-image: url(@/assets/background1.png);
      }

      .photos2 {
        background-image: url(@/assets/background2.png);
      }

      .photos3 {
        background-image: url(@/assets/background3.png);
      }
    }

    .carouse-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      width: 100%;
      margin-top: 10px;
      scroll-snap-align: none !important;

      .carouse-title {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;

        font-weight: 700;
        font-size: 40px;
        font-family: 'SimSun', '宋体', sans-serif;
      }

      .carousel {
        width: 90%;

        .el-carousel-items {
          position: relative;
          border-radius: 15px;
          overflow: hidden;

          /* 轮播图图片 */

          .carousel-item {
            position: relative;
            top: -2px;

            height: 400px;
            width: 100%;
            transition: all 0.5s;
          }

          /* 遮罩层 */

          .mask-layer {
            position: absolute;
            bottom: 0px;

            /* 弹性布局 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 20px;

            background-color: rgba(0, 0, 0, 0.2);
            width: 100%;
            height: 160px;
            color: white;
            letter-spacing: 0.5px;
            transition: all 0.5s;

            .big-font {
              font-size: 1.5rem;
            }

            .flex-text {
              text-align: center;
              padding: 0 10px 50px 10px;
            }
          }

          .mask-layer:hover {
            background-color: rgba(0, 0, 0, 0.4);
            transform: translateY(-5px);
          }

          .carousel-item:hover {
            transform: scale(1.01);
          }

          .carousel-item:hover + .mask-layer {
            background-color: rgba(0, 0, 0, 0.1);
          }
        }
      }
    }

    .chooses {
      /* 网格布局 */
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: 50% 50%;

      width: 80%;
      height: 700px;
      margin: 50px 0 30px 0;
    }
  }
}
</style>
